<template>
    <el-dialog :append-to-body="true" v-model="visible" width="366" :before-close="handleClose"
        class="game-over-dialog" center>
        <div class="content">
            <h3>游戏结束</h3>
            <div class="game-info">
                <div class="item">
                    <span>游戏时长</span>
                    <span class="time">{{ gameData.sessionDuration }} 分钟 </span>
                </div>
                <div class="item">
                    <span>消耗云豆</span>
                    <span class="time">{{ gameData.consumedCoins }}</span>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" class="block-btn" @click="handleClose()">好的</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    gameData: {
        type: Object,
        default: () => ({
            sessionDuration: 0,
            consumedCoins: 0
        })
    }
})

// Refs
const visible = computed({
    get: () => {
        // 处理可能传入的ref对象或原始值
        return props.modelValue.value !== undefined ? props.modelValue.value : props.modelValue;
    },
    set: (value) => {
        // 处理回传时的ref对象或原始值
        if (props.modelValue.value !== undefined) {
            props.modelValue.value = value;
        }
        emit('update:modelValue', value);
    }
})

// Emits
const emit = defineEmits(['update:modelValue', 'close'])

// Methods
const handleClose = () => {
    emit('close')
    emit('update:modelValue', false)
}
</script>

<style lang="scss">
.game-over-dialog {
    .el-dialog__header {
        padding: 20px !important;

        .el-dialog__title {
            color: #fff;
        }
    }

    .el-dialog__body {
        padding: 0 40px;

        h3 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }

        .game-info {
            margin: 20px 0;
            padding: 10px 15px;
            background: #232527;
            border-radius: 4px;

            .item {
                line-height: 36px;
                display: flex;
                justify-content: space-between;

                .time {
                    color: #fff;
                }
            }
        }
    }

    .el-dialog__footer {
        padding-top: 0 !important;
        padding-bottom: 38px;

        .el-button {
            &.el-button--primary {
                background: #ffe500;
                border-color: #ffe500;
                color: #121212;
                width: 284px;
                height: 50px;
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
}
</style>